<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .box::after {
      content: "";
      flex-grow: 99999;
    }

    .item {
      /* height: 200px; */
      /* width: 172px; */
      margin: 5px;
      /* flex-grow: 1; */
      background-color: brown;
      position: relative;
    }

    .item img {
      /* height: 100%; */
      width: 100%;
      vertical-align: top;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>

  <body>
    <div class="box">
      <!-- <div class="item"><img src="../images/zhan1.jpg" alt=""></div> -->
    </div>
  </body>
  <script src="../js/jquery-1.8.3.js"></script>
  <script>
    //模仿获取数据库图片资源
    var datas = [
      {
        url: "https://www.bizhishe.com/d/file/2019-09-24/1569329782789708.jpg",
        width: "173",
        height: "309",
      },
      {
        url:
          "https://uploadfile.bizhizu.cn/up/a1/47/72/a1477220e490e383f5e4838d2c52f1d5.jpg",
        width: "173",
        height: "309",
      },
      {
        url:
          "https://uploadfile.bizhizu.cn/up/93/65/6f/93656f7120600ca84dcb9d19336c4cb7.jpg",
        width: "173",
        height: "309",
      },
      {
        url:
          "https://uploadfile.bizhizu.cn/up/f4/6c/20/f46c20b40215f58e25290dd066c6eae0.jpg",
        width: "173",
        height: "309",
      },
      {
        url:
          "https://uploadfile.bizhizu.cn/up/ce/ad/06/cead06ff96d36bc5bf6478d41d9074a5.jpg.source.jpg",
        width: "173",
        height: "309",
      },
      {
        url: "https://pic.3gbizhi.com/2019/1010/20191010013946145.jpg",
        width: "206",
        height: "309",
      },
      {
        url:
          "https://star-img.idol001.com/atlas/7460/images/2019/12/28/QesR4tkfAM1577535180591.jpg/default-w720",
        width: "206",
        height: "309",
      },
      {
        url: "../images/zhan1.jpg",
        width: "182",
        height: "324",
      },
      {
        url: "../images/zhan2.jpg",
        width: "182",
        height: "324",
      },
      {
        url: "../images/zhan3.jpg",
        width: "182",
        height: "273",
      },
      {
        url: "../images/zhan4.jpg",
        width: "182",
        height: "324",
      },
      {
        url: "../images/zhan5.jpg",
        width: "182",
        height: "273",
      },
      {
        url: "../images/zhan6.jpg",
        width: "182",
        height: "266",
      },
      {
        url: "../images/zhan7.jpg",
        width: "182",
        height: "324",
      },
      {
        url: "../images/zhan8.jpg",
        width: "182",
        height: "273",
      },
      {
        url: "../images/zhan9.jpg",
        width: "182",
        height: "273",
      },
      {
        url: "../images/zhan10.jpg",
        width: "182",
        height: "273",
      },
      {
        url: "../images/zhan11.jpg",
        width: "182",
        height: "307",
      },
      {
        url: "../images/zhan12.jpg",
        width: "182",
        height: "324",
      },
      {
        url: "../images/zhan13.jpg",
        width: "182",
        height: "324",
      },
      {
        url: "../images/zhan14.jpg",
        width: "182",
        height: "150",
      },
      {
        url: "../images/zhan15.jpg",
        width: "182",
        height: "310",
      },
      {
        url: "../images/zhan16.jpg",
        width: "182",
        height: "117",
      },
    ];
    var oBox = document.querySelector(".box");
    render();

    function render() {
      // var fragment = document.createDocumentFragment();
      for (let i = 0; i < datas.length; i++) {
        // var oDiv = document.createElement('div');
        // oDiv.className = 'item'
        // oDiv.style.width = datas[i].width + 'px'
        // oDiv.innerHTML = `<img src="${datas[i].url}" alt="">`
        // fragment.appendChild(oDiv)
        $(".box").append(
          `<div class="item" style="width:${
            (200 / datas[i].height) * datas[i].width
          }px;flex-grow:${(200 / datas[i].height) * datas[i].width}">
                    <div style="padding-bottom:${
                      (datas[i].height / datas[i].width) * 100
                    }%;background:#ccc">
                        <img data-src="${datas[i].url}" alt="">
                    </div>
                </div>`
        );
      }
      showImages();
      // oBox.appendChild(fragment)
    }
    $(window).scroll(function () {
      showImages();
      // 页面高度
      const pageHeight = $(document).height();
      // 可视区高度
      const windowHeight = $(window).height();
      // 滚动条离顶部的高度
      const scrollTop = $(window).scrollTop();
      if (pageHeight - windowHeight - scrollTop == 100) {
        render();
      }
    });
    // 图片懒加载
    function showImages() {
      // 可视区高度
      const windowHeight = $(window).height();
      // 滚动条离顶部的高度
      const scrollTop = $(window).scrollTop();
      $(".item img").each(function () {
        const imageTop = $(this).offset().top;
        if (imageTop - scrollTop <= windowHeight - 100) {
          // this.src = this.getAttribute('data-src')
          $(this).attr("src", $(this).attr("data-src"));
          // console.log($(this).attr("data-src"));
        }
      });
    }
  </script>
</html>
